<template>
    <div style="padding:0 37px 0 44px">
        <div class="breadcrumb-father">
            <div class="new-breadcrumb">

                <router-link :to="{path:'/welcome'}">
                    <img src="../../../assets/imgs/Home.png" alt="">
                </router-link>
                <router-link :to="{path:'/merAudit'}">{{$t('mer.mchtApproval')}}</router-link>
                <span class="arrow">></span>
                <!-- <icon-svg icon-class="setting"></icon-svg> -->
                <span :title="$route.query.name">{{$route.query.name}}</span>
            </div>
        </div>

        <div v-if=" companyId == '1' || this.companyId == '3' ">
            <div :class="['handle_box',{'handle_box_cn': cnClass, 'handle_box_en': enClass}]">
                <ul class="anchors_ul">
                    <a href="javascript:void(0)" @click="goAnchor('#one',0)">
                        <li class="active" id="one-li">{{$t('mer.CompanyInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#two',1)">
                        <li id="two-li">{{$t('mer.ContactInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#three',2)">
                        <li id="three-li">{{$t('mer.BusinessInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#four',3)">
                        <li id="four-li">{{$t('mer.OnlineBusiness')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#five',4)">
                        <li id="five-li">{{$t('mer.SettlementInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#six',5)">
                        <li id="six-li">{{$t('search.channelInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#seven',6)">
                        <li id="seven-li">{{$t('mer.Attachments')}}</li>
                    </a>
                </ul>
                <!-- anchors_ul结束 -->

                <ul class="button_box" v-if=" userPhone == '13501189583' || userPhone == '15018955912' || userPhone == '15219441946' ? false : true ">
                    <li class="confirm" @click='auditMercYes(1)'>
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{$t('button.Approve')}}
                    </li>
                    <li class="cancel" @click="auditMercYes(2)">
                        <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('cash.reject')}}
                    </li>
                </ul>
                <!-- button_box结束 -->
            </div>
            <!-- handle_box结束 -->

            <!-- 防止表格层被遮挡 -->
            <div :class="['table-space-div',{'table-space-div_cn': cnClass, 'table-space-div_en': enClass}]"></div>

            <div class="table-div" id="one">
                <div class="title">{{$t('mer.CompanyInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Merchant1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.name" id="name" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BusinessAddress')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.address" id="address" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MailAddress')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.mailingAddress" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BRNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.businessRegistrationNo" id="businessRegistrationNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Capital') + currency }}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.registeredCapital" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.YearsOfBusiness')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.establishmentYear" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.IncorporationCountry')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.establishPlace" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.EmployeeNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.staffNumber" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MerchantType')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy="merchantDatas.merchantsType" id="merchantsType" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.OwnershipType')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.companyType" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Contractperson')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.liaisonPerson" id="liaisonPerson" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.email" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Position1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.post" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.OfficePhone')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.officeNo" id="officeNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Mobile')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.liaisonPhone" id="liaisonPhone" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Fax')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.fax" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Director')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.legalPerson" id="legalPerson" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DirectorHKID')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.legalPersonIdNumber" id="legalPersonIdNumber" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DirectorPassport')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.passportNumber" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Nationality')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.nationality" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.company')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy="merchantDatas.companyName" id="companyName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.companyID')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.firmNumber" readonly="readonly" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="two">
                <div class="title">{{$t('mer.ContactInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.URL')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.url" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TargetLaunchDate')}}:</div>
                        </div>
                        <div class="right-div date-input"><input type="text" v-model.lazy.trim="merchantDatas.launchDate" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TechnicalContact')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.technical" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.technicalEmail" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mec.PhoneNo1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.technicalPhone" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.OperationContact')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.operation" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Email')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.operationEmail" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mec.PhoneNo1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.accountantPhone" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="three">
                <div class="title">{{$t('mer.BusinessInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BusinessNature')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="industry" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ProductsServices')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.profession" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TargetCustomers')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.targetClient" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.provider')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.paymentServiceProvider" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.LastYearSalesVol') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.lastYearSalesVol" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.YearBeforeSales') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.yearBeforeSales" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="four">
                <div class="title">{{$t('mer.OnlineBusiness')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DeliveryProvider')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.expressSupplier" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.CustomerHotline')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.serviceHotline" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ReturnRefundPolicy')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.isReturnPolicy" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.FulfuillmentTime')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.cycleTime" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ReceiptProvided')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.isSignFor" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.AvgTransactionAmount') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealAvg" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MinTransactionAmount')+ currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealMin" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.MaxTransactionAmount') + currency}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealMax" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After3Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealSumThree" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After6Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealSumSix" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ForecastMonthlySales')}}{{$t('mer.After1Year')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthDealSumYear" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After3Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthOperationRentalThree" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After6Months')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthOperationRentalSix" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NoOfTransactions')}}{{$t('mer.After1Year')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.monthOperationRentalYear" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="five">
                <div class="title">{{$t('mer.SettlementInfo')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.AccountName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.accountName" id="accountName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.AccountNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.accountNo" id="accountNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BankName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.bankName" id="bankName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BankCode')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.bankCode" id="bankCode" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.BranchCode')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.branchCode" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.Address')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.bankAddres" id="bankAddres" :readonly="disabled" maxlength="200" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.SettlementPeriod')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.setDay" id="setDay" :readonly="disabled" :class="{'view-input': disabled}"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.AgentName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.distributorNumber" id='distributorNumber' :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.levelID1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.distributorId" id='distributorId' readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.SWIFT')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.swiftCode" id="swiftCode" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('salesman.Salesman')}}:</div>
                        </div>
                        <div class="right-div">
                            <el-select :placeholder="$t('placeH.Please')" id="salesmanName" v-model="merchantDatas.salesmanName" value-key="id" @change='selectSalesman()' clearable :readonly="disabled">
                                <el-option v-for='item in selectSalesmanData' :key="item.id" :label="item.salesmanName" :value="item.salesmanName"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.BDStaffNo')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.lazy.trim="merchantDatas.salesmanNumber" id="salesmanNumber" readonly="disabled" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.commissionRatio')}}:</div>
                        </div>
                        <div class="right-div">
                            <input type="text" v-model.lazy.trim="merchantDatas.salesmanProportion" :readonly="disabled" :class="{'view-input': disabled}" />
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeBearer1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.chargeType" id="chargeType" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="six">
                <div class="title">{{$t('search.channelInfo')}}</div>
                <ul class="content">
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.WechatRMBWallet')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.no" id="no" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.fee" id="fee" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.WechatHKDWallet')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.hkNo" id="hkNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.wechatHkFee" id="wechatHkFee" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{ $t('trade.Unionpay') }}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <!-- 原银联商户号暂且舍去，用子商户号代替 -->
                    <!-- <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPayNo" id="unionPayNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li> -->
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPaySubNo" id="unionPaySubNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPayFee" id="unionPayFee" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');if(this.value<1){this.value=1};,if(this.value>100){this.value=100}" :readonly="disabled" maxlength="7" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.TerminalNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.terminalNo" id="terminalNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.key')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.unionPaySignKey" id="unionPaySignKey" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="32" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('mer.alipayDirect')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayHkNo" id="alipayHkNo" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="16" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipayHkFee" id="alipayHkFee" autocomplete="off" oninput="this.value=this.value.replace(/[^\d\.]/g,'');if(this.value<0){this.value=0};,if(this.value>100){this.value=100}" :readonly="disabled" maxlength="20" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.key')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.alipaySignKey" id="alipaySignKey" autocomplete="off" oninput="this.value=this.value.replace(/[^\d]/g,'')" :readonly="disabled" maxlength="32" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="seven">
                <div class="title">{{$t('mer.Attachments')}}</div>
                <ul class="content">
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('mer.BR')}}*</div>
                            <div class="show-div" v-if="merchantDatas.businessRegistrationUrl">
                                <img :src="merchantDatas.businessRegistrationUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('businessRegistrationUrl')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('businessRegistrationUrl')">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('mer.CertOfIncoporation')}}</div>
                            <div class="show-div" v-if="merchantDatas.licenseImageUrl">
                                <img :src="merchantDatas.licenseImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('licenseImageUrl')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('licenseImageUrl')">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('mer.DirectorHKID1')}}*</div>
                            <div class="show-div" v-if="merchantDatas.identityCardFrontImageUrl">
                                <img :src="merchantDatas.identityCardFrontImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('identityCardFrontImageUrl')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('identityCardFrontImageUrl')">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('mer.BankStatement')}}*</div>
                            <div class="show-div" v-if="merchantDatas.bankCardImageUrl">
                                <img :src="merchantDatas.bankCardImageUrl" class="avatar imgNow pointer" @click="handlePictureCardPreview('bankCardImageUrl')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('bankCardImageUrl')">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="image-item">
                        <div class="img-div">
                            <div class="img-title">{{$t('other.MerchantLogo')}}</div>
                            <div class="show-div" v-if="merchantDatas.logo">
                                <img :src="merchantDatas.logo" class="avatar imgNow pointer" @click="handlePictureCardPreview('logo')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('logo')">{{ $t('button.view') }}</div>
                                    <div class="del" v-show='!disabled' @click="delImg5()">{{ $t('button.delete') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('mer.Photos')}}*</div>

                <ul class="content">
                    <li class="image-item" v-for='(item,index) in merAuditImgList' :key=index>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div" v-if="item.src">
                                <img :src="item.src" @click="handlePictureCardPreview(item.src,0)" />
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview(item.src,0)">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- table-div结束 -->

            <div style="height: 100px;"></div>
        </div>

        <div v-else-if=" companyId == '2' ">
            <div :class="['handle_box',{'handle_box_cn': cnClass, 'handle_box_en': enClass}]">
                <ul class="anchors_ul">
                    <a href="javascript:void(0)" @click="goAnchor('#one',0)">
                        <li class="active" id="one-li">{{$t('AuMer.CompanyInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#two',1)">
                        <li id="two-li">{{$t('AuMer.ContactInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#three',2)">
                        <li id="three-li">{{$t('AuMer.BillingInfomation')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#four',3)">
                        <li id="four-li">{{$t('search.channelInfo')}}</li>
                    </a>
                    <a href="javascript:void(0)" @click="goAnchor('#five',4)">
                        <li id="five-li">{{$t('AuMer.OtherInformation')}}</li>
                    </a>
                </ul>
                <!-- anchors_ul结束 -->

                <ul class="button_box" v-if=" userPhone == '13501189583' || userPhone == '15018955912' || userPhone == '15219441946' ? false : true ">
                    <li class="confirm" @click='auditMercYes(1)'>
                        <icon-svg icon-class="tijiao" class="icon-btn"></icon-svg>{{$t('button.Approve')}}
                    </li>
                    <li class="cancel" @click="auditMercYes(2)">
                        <icon-svg icon-class="quxiao" class="icon-btn"></icon-svg>{{$t('cash.reject')}}
                    </li>
                </ul>
                <!-- button_box结束 -->
            </div>
            <!-- handle_box结束 -->

            <!-- 防止表格层被遮挡 -->
            <div :class="['table-space-div',{'table-space-div_cn': cnClass, 'table-space-div_en': enClass}]"></div>

            <div class="table-div" id="one">
                <div class="title">{{$t('AuMer.CompanyInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.RegistrationName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.name" id="name" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.AustraliaBusinessNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.businessRegistrationNo" id="businessRegistrationNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.BusinessInfomation')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="industry" id="industry" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.ContactNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.officeNo" id="officeNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.Address')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.address" id="address" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.City')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy="merchantDatas.bankProvince" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.Postcode')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.mailingAddress" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.State')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.bankCity" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.Website')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.companyUrl" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.WhiteLable')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.whiteLable" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>

                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item" id="textareaItem" style="width:100%;height:80px;">
                        <div class="left-div" id="textareaLeft">
                            <div class="cont">{{$t('AuMer.CompanyDescripption')}}:</div>
                        </div>
                        <div class="right-div" id="textareaRight" style="height:100%;padding:4px 4px 4px 0;">
                            <textarea v-model="merchantDatas.companyProfile" :class="['textareaStyle',{'closeStyle': disabled}]" :readonly="disabled"></textarea>
                        </div>
                    </li>

                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="two">
                <div class="title">{{$t('AuMer.ContactInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.FullNmae')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.legalPerson" id="legalPerson" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.JobTitle')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.post" id="post" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.TelephoneNo')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.liaisonPhone" id="liaisonPhone" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.EmailAddress')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.email" id="email" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>

                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="three">
                <div class="title">{{$t('AuMer.BillingInfomation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.BankName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.bankName" id="bankName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.CompanyAccountNmae')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.accountName" id="accountName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.BSB')}}*:</div>
                        </div>
                        <div class="right-div"><input v-model.lazy.trim="merchantDatas.branchCode" id="branchCode" type="text" :readonly="disabled" class="brandeInp" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.AccountNumber')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.accountNo" id="accountNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="four">
                <div class="title">{{$t('search.channelInfo')}}</div>
                <ul class="content">
                    <!-- <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.SubAccountNo2')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.no" id="no" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate1')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.fee" id="fee" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li> -->
                    
                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('search.Alipay')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.merchantNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.alipayNo" id="alipayNo" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.alipayHkFee" id="alipayHkFee" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div"></div>
                        <div class="right-div"></div>
                    </li>

                    <li class="item clearFloat">
                        <div class="left-div left-div-else">
                            <div class="cont typeTitle">{{$t('mer.AugsPay')}}:</div>
                        </div>
                        <div class="right-div right-div-else"></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.userName')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsUserName" id="augsUserName" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.APIKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsApiKey" id="augsApiKey" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.SignKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsSignKey" id="augsSignKey" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.NotifyKey')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsNotifyKey" id="augsNotifyKey" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeRate')}}(%):</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.trim="merchantDatas.augsFee" id="augsFee" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->
                <!-- <div class="circle-title">Shop photos</div> -->
            </div>
            <!-- table-div结束 -->

            <div class="table-div" id="five">
                <div class="title">{{$t('AuMer.OtherInformation')}}</div>
                <ul class="content">
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.AgentName')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.distributorNumber" id="distributorNumber" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('search.levelID1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.distributorId" id="distributorId" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('AuMer.SettlementPeriod')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.setDay" id="setDay" :readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.ServiceChargeBearer1')}}*:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model="merchantDatas.chargeType" id="chargeType" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('salesman.Salesman')}}:</div>
                        </div>
                        <div class="right-div">
                            <el-select :placeholder="$t('placeH.Please')" id="salesmanName" v-model="merchantDatas.salesmanName" value-key="id" @change='selectSalesman()' clearable :readonly="disabled">
                                <el-option v-for='item in selectSalesmanData' :key="item.id" :label="item.salesmanName" :value="item.salesmanName"></el-option>
                            </el-select>
                        </div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('agent.BDStaffNo')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.salesmanNumber" id="salesmanNumber" readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                    <li class="item">
                        <div class="left-div">
                            <div class="cont">{{$t('mer.DescriptionOfGoods')}}:</div>
                        </div>
                        <div class="right-div"><input type="text" v-model.lazy.trim="merchantDatas.goodsDescription" id="goodsDescription" readonly="disabled" :class="{'view-input': disabled}" /></div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('mer.Photos')}}*</div>

                <!-- 查看图片组 -->
                <ul class="content">
                    <li class="image-item" v-for='(item,index) in merAuditImgList' :key=index>
                        <div class="img-div img-group-div">
                            <div class="show-div show-group-div" v-if="item.src">
                                <img :src="item.src" @click="handlePictureCardPreview(item.src,0)" />
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview(item.src,0)">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <!-- content结束 -->

                <div class="image-group-title">{{$t('other.MerchantLogo')}}</div>

                <ul class="content">
                    <li class="image-item">
                        <div class="img-div img-group-div">
                            <div class="show-div" v-if="merchantDatas.logo">
                                <img :src="merchantDatas.logo" class="avatar imgNow pointer" @click="handlePictureCardPreview('logo')">
                                <div class="btn-div">
                                    <div class="view view-single" @click="handlePictureCardPreview('logo')">{{ $t('button.view') }}</div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
            <!-- table-div结束 -->

            <div style="height: 100px;"></div>
        </div>

        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>

    </div>
</template>

<script>
import {
    viceMerchant,
    MerchantByCheck,
    queryShopAll
} from "api/audit/merAudit/index";
import { salesmanAll } from "api/merchant/agent/index";

export default {
    name: "merAudit",
    data() {
        return {
            userPhone: localStorage.getItem("phone"),
            merAuditDatas: [],
            res: [],
            obj: {},
            disabled: true,
            headers: { "access-token": sessionStorage.getItem("access-token") },
            merchantDatas: {
                setDay: undefined /*结算周期*/,
                //公司资料
                name: undefined /*商户登记名称*/,
                address: undefined /*登记地址*/,
                mailingAddress: undefined /*邮寄地址*/,
                businessRegistrationNo: undefined /*商业登记号码*/,
                registeredCapital: undefined /*资金总额（HK$）*/,
                establishmentYear: undefined /*成立年数*/,
                establishPlace: undefined /*成立地点*/,
                staffNumber: undefined /*雇员人数*/,
                merchantsType: undefined /*商户类型商户类型(0:线上商户 1：线下商户)*/,
                companyType: undefined /*公司类别*/,
                liaisonPerson: undefined /*联络人*/,
                email: undefined /*邮箱地址*/,
                post: undefined /*职位(0:老板,1:店长,2:店员)*/,
                officeNo: undefined /*办公室电话*/,
                liaisonPhone: undefined /*手机号码*/,
                fax: undefined /*传真号码*/,
                legalPerson: undefined /*董事全名*/,
                legalPersonIdNumber: undefined /*董事身份证号*/,
                passportNumber: undefined /*董事护照号码*/,
                nationality: undefined /*国籍*/,
                no: undefined /*子商户号*/,
                companyName: undefined /*上级公司名称*/,
                firmNumber: undefined /*上级公司编号*/,
                //联络资料
                url: undefined /*网址*/,
                launchDate: undefined /*预定服务推出日期*/,
                technical: undefined /*技术联络人*/,
                technicalEmail: undefined /*邮箱地址（技术）*/,
                technicalPhone: undefined /*联络电话（技术）*/,
                operation: undefined /*运营联络人*/,
                operationEmail: undefined /*邮箱地址（运营）*/,
                operationPhone: undefined /*联络电话（运营）*/,
                accountant: undefined /*会计联络人*/,
                accountantEmail: undefined /*邮箱地址（会计）*/,
                accountantPhone: undefined /*联络电话（会计）*/,
                //技术资料
                profession: undefined /*业务性质*/,
                industry: undefined /*产品/服务类别*/,
                targetClient: undefined /*目标客户*/,
                paymentServiceProvider: undefined /*现在/曾经选用的付款服务供应商/银行*/,
                turnover: undefined /*过去两年营业额（HK$）*/,
                //互联网上提供的业务
                expressSupplier: undefined /*送货快递商或快递供应商*/,
                serviceHotline: undefined /*客户服务热线*/,
                isReturnPolicy: undefined /*是否有退换货政策(0:是1：否)*/,
                cycleTime: undefined /*由收单至送货所需时间*/,
                isSignFor: undefined /*是否签收(0:是1：否)*/,
                budgetTurnoverThree: undefined /*预算每月营业额（三月后*/,
                budgetTurnoverSix: undefined /*预算每月营业额六月后*/,
                budgetTurnoverYear: undefined /*预算每月营业额：一年后：*/,
                monthDealSum: undefined /*每月交易总数*/,
                monthOperationRental: undefined /*每月运营总额*/,
                monthDealAvg: undefined /*每宗交易平均金额*/,
                monthDealMin: undefined /*每宗交易最低金额*/,
                monthDealMax: undefined /*每宗交易最高金额*/,
                //清结算资讯登记
                accountName: undefined /*账户名称*/,
                accountNo: undefined /*账户号*/,
                bankName: undefined /*银行名称*/,
                bankCode: undefined /*银行编号*/,
                branchCode: undefined /*分行号*/,
                bankAddres: undefined /*银行地址*/,
                swiftCode: undefined /*银行国际代码*/,
                fee: undefined /*手续费率*/,
                chargeType: undefined /*手续费承担方/收费类型(0:商户承担,1:用户承*/,
                distributorId: undefined /*所属代理商（传Id）*/,
                distributorNumber: undefined /*代理商编号*/,
                salesmanId: undefined /*业务员*/,
                salesmanNumber: undefined /*业务员编号*/,
                salesmanProportion: undefined /*分成比例*/,
                //附件
                businessRegistrationUrl: undefined /*商业登记副本*/,
                licenseImageUrl: undefined /*公司注册证明副本*/,
                identityCardFrontImageUrl: undefined /*董事身份证副本*/,
                bankCardImageUrl: undefined /*银行月结单副本*/,
                facadeImageUrl: undefined /*公司或店铺相片*/
            },
            mercDataList: [],
            mercOldData: [],
            mercNewData: [],
            mercNewArr: [],
            diffData: [],
            num: 0,
            merAuditImgList: [],
            optionsI: JSON.parse(localStorage.getItem("queryIndustryObj")),
            companyId: localStorage.getItem("companyId"),
            industryCode: null,
            AU_State_list: JSON.parse(
                localStorage.getItem("queryAU_State_list")
            ),
            areaCode: "",
            dialogImageUrl: "",
            dialogVisible: false,
            selectSalesmanData: [],
            salesmanObj: {},
            currency: undefined,
            clientWidth: document.body.clientWidth,
            cnClass: false,
            enClass: false,
            locale: localStorage.getItem("locale") == "en" ? "1" : "0",
            extendMerchantDatas: {},
            industry: ""
        };
    },
    mounted() {
        if (this.companyId == 2) {
            // 计算文本域宽度
            let textareaItem = $("#textareaItem").width();
            let textareaLeft = $(".left-div").width();
            let textareaRight = textareaItem - textareaLeft - 4;
            $("#textareaLeft").css("width", textareaLeft);
            $("#textareaRight").css("width", textareaRight);
        }
        const that = this;
        window.onresize = function() {
            that.initView();
            if (this.companyId == 2) {
                // 实时计算文本域宽度
                let textareaItem = $("#textareaItem").width();
                let textareaLeft = $(".left-div").width();
                let textareaRight = textareaItem - textareaLeft - 4;
                $("#textareaLeft").css("width", textareaLeft);
                $("#textareaRight").css("width", textareaRight);
            }
        };
        window.addEventListener("scroll", this.handleScroll);
    },
    destroyed() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    created() {
        this.initView();
        let mercMsg = {
            merchantId: this.$route.query.merId,
            remarks: this.$route.query.remarks
        };
        this.getMerData(mercMsg);

        setTimeout(function() {
            $("#merAudit").addClass("is-active");
        }, 500);
        // $("#z_auditManage .el-menu a li:first").addClass('is-active');

        if (this.companyId == "1") this.currency = "HK$ ";
        if (this.companyId == "2") this.currency = "A$ ";
    },
    beforeRouteLeave(to, from, next) {
        if (to.path == "/merAudit") {
            next();
        } else {
            $("#z_auditManage .el-menu a li:first").removeClass("is-active");
            localStorage.removeItem("obj");
            next();
        }
    },
    methods: {
        // 滚动时，添加对应的li的active
        handleScroll() {
            var scrollTop =
                window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop;

            if (this.companyId == "1" || this.companyId == "3") {
                if (scrollTop < 442) {
                    this.setActive("one");
                } else if (scrollTop >= 442 && scrollTop < 692) {
                    this.setActive("two");
                } else if (scrollTop >= 692 && scrollTop < 902) {
                    this.setActive("three");
                } else if (scrollTop >= 902 && scrollTop < 1232) {
                    this.setActive("four");
                } else if (scrollTop >= 1232 && scrollTop < 1562) {
                    this.setActive("five");
                } else if (scrollTop >= 1562 && scrollTop < 1762) {
                    this.setActive("six");
                } else {
                    this.setActive("seven");
                }
            } else if (this.companyId == "2") {
                if (scrollTop < 362) {
                    this.setActive("one");
                } else if (scrollTop >= 362 && scrollTop < 572) {
                    this.setActive("two");
                } else if (scrollTop >= 572 && scrollTop < 782) {
                    this.setActive("three");
                } else if (scrollTop >= 782 && scrollTop < 992) {
                    this.setActive("four");
                } else {
                    this.setActive("five");
                }
            }
        },
        // 设置li标签的active类名
        setActive(id) {
            for (let i = 0; i < $(".anchors_ul li").length; i++) {
                $($(".anchors_ul li")[i]).removeClass("active");
            }
            $("#" + id + "-li").addClass("active");
        },
        initView() {
            this.clientWidth = document.body.clientWidth; // 获取页面可视区域宽度
            // 根据中英文以及页面宽度调整顶部固定DIV
            if (this.companyId == "1" || this.companyId == "3") {
                if (parseInt(this.locale) == 1 && this.clientWidth <= 1679) {
                    // 英文
                    this.enClass = true;
                    this.cnClass = false;
                } else if (
                    parseInt(this.locale) == 0 &&
                    this.clientWidth < 1430
                ) {
                    // 中文
                    this.cnClass = true;
                    this.enClass = false;
                } else {
                    // 默认
                    this.cnClass = false;
                    this.enClass = false;
                }
            } else if (this.companyId == "2") {
                if (parseInt(this.locale) == 1 && this.clientWidth < 1555) {
                    // 英文
                    this.enClass = true;
                    this.cnClass = false;
                } else if (
                    parseInt(this.locale) == 0 &&
                    this.clientWidth < 1174
                ) {
                    // 中文
                    this.cnClass = true;
                    this.enClass = false;
                } else {
                    // 默认
                    this.cnClass = false;
                    this.enClass = false;
                }
            }
        },
        // 跳转锚点位置
        goAnchor(selector, index) {
            var anchor = this.$el.querySelector(selector);

            if (this.cnClass || this.enClass) {
                document.documentElement.scrollTop = anchor.offsetTop - 120;
            } else {
                document.documentElement.scrollTop = anchor.offsetTop - 80;
            }

            for (let i = 0; i < $(".anchors_ul li").length; i++) {
                $($(".anchors_ul li")[i]).removeClass("active");
            }
            let activeA = $($(".anchors_ul").children()[index]);
            activeA.children().addClass("active");
        },
        // 点击查看大图
        handlePictureCardPreview(url, index) {
            if (index == 0) {
                this.dialogImageUrl = url;
            } else {
                this.dialogImageUrl = this.merchantDatas[url];
            }
            this.dialogVisible = true;
        },
        selectSalesman() {
            // console.log(this.merchantDatas.salesmanName);
            if (!this.merchantDatas.salesmanName) {
                this.merchantDatas.salesmanId = null;
                this.merchantDatas.salesmanNumber = null;
            }
            // this.merchantDatas.salesmanName = this.salesmanObj.salesmanName;
            for (let i = 0; i < this.selectSalesmanData.length; i++) {
                if (
                    this.merchantDatas.salesmanName ==
                    this.selectSalesmanData[i].salesmanName
                ) {
                    this.merchantDatas.salesmanNumber = this.selectSalesmanData[
                        i
                    ].salesmanNumber;
                    this.merchantDatas.salesmanId = this.selectSalesmanData[
                        i
                    ].id;
                }
            }
        },
        //根据商户id查询商户信息接口方法
        getMerData(value) {
            const _that = this;
            MerchantByCheck(value)
                .then(res => {
                    this.mercDataList = res.value;
                    this.mercNewData = res.value[0];
                    this.mercOldData = res.value[1];

                    this.mercNewData.distributorName =
                        res.value[0].distributorNumber;

                    if (res.value.length == 1) {
                        this.merchantDatas = this.mercNewData;
                    } else {
                        this.merchantDatas = this.mercNewData;
                        this.mercNewArr = Object.getOwnPropertyNames(
                            this.mercNewData
                        );
                        for (let i = 0; i < this.mercNewArr.length; i++) {
                            const propName = this.mercNewArr[i];
                            if (
                                this.mercNewData[propName] !==
                                this.mercOldData[propName]
                            ) {
                                this.num++;
                                this.diffData[
                                    this.num
                                ] = document.getElementById(propName);
                            }
                        }
                        for (let j = 0; j < this.diffData.length; j++) {
                            if (this.diffData[j] != null) {
                                this.diffData[j].style.color = "red";
                            }
                        }
                    }

                    for (let i = 0; i < this.optionsI.length; i++) {
                        if (
                            _that.merchantDatas.industryCode ==
                            _that.optionsI[i].industryCode
                        ) {
                            _that.industry = _that.optionsI[i].industryName;
                            break;
                        }
                    }

                    if (this.companyId == "2") {
                        this.areaCode = this.merchantDatas.bankCity;
                        for (let i = 0; i < this.AU_State_list.length; i++) {
                            if (
                                this.AU_State_list[i].areaCode ==
                                this.merchantDatas.bankCity
                            ) {
                                this.merchantDatas.bankCity = this.AU_State_list[
                                    i
                                ].areaName;
                                break;
                            }
                        }
                    }

                    salesmanAll({
                        companyId: localStorage.getItem("companyId")
                    }).then(res => {
                        this.selectSalesmanData = res.value;
                    });

                    if (this.merchantDatas.merchantsType == "Y") {
                        this.merchantDatas.merchantsType = this.$t(
                            "mer.OnlineMerchants"
                        );
                    }
                    if (this.merchantDatas.merchantsType == "N") {
                        this.merchantDatas.merchantsType = this.$t(
                            "mer.UnderLineMerchant"
                        );
                    }

                    if (this.merchantDatas.chargeType == "0") {
                        this.merchantDatas.chargeType = this.$t(
                            "button.Merchant"
                        );
                    }
                    if (this.merchantDatas.chargeType == "1") {
                        this.merchantDatas.chargeType = this.$t("mer.Customer");
                    }

                    if (this.merchantDatas.whiteLable == "Y") {
                        this.merchantDatas.whiteLable = this.$t("search.YES");
                    }
                    if (this.merchantDatas.whiteLable == "N") {
                        this.merchantDatas.whiteLable = this.$t("search.NO");
                    }

                    // if (this.merchantDatas.isReturnPolicy == "0") {
                    //   this.merchantDatas.isReturnPolicy = this.$t("search.YES");
                    // }
                    // if (this.merchantDatas.isReturnPolicy == "1") {
                    //   this.merchantDatas.isReturnPolicy = this.$t("search.NO");
                    // }
                    // if (this.merchantDatas.isSignFor == "0") {
                    //   this.merchantDatas.isSignFor = this.$t("search.YES");
                    // }
                    // if (this.merchantDatas.isSignFor == "1") {
                    //   this.merchantDatas.isSignFor = this.$t("search.NO");
                    // }
                    if (this.merchantDatas.setDay == "1") {
                        this.merchantDatas.setDay = "T+1";
                    }
                    if (this.merchantDatas.setDay == "2") {
                        this.merchantDatas.setDay = "T+2";
                    }
                    if (this.merchantDatas.setDay == "3") {
                        this.merchantDatas.setDay = "T+3";
                    }
                    this.merAuditImgList[0] = {};
                    this.merAuditImgList[0].src = this.merchantDatas.facadeImageUrl;
                    this.merAuditImgList[1] = {};
                    this.merAuditImgList[1].src = this.merchantDatas.facadeImageUrl1;
                    this.merAuditImgList[2] = {};
                    this.merAuditImgList[2].src = this.merchantDatas.facadeImageUrl2;
                    this.merAuditImgList[3] = {};
                    this.merAuditImgList[3].src = this.merchantDatas.facadeImageUrl3;
                    this.merAuditImgList[4] = {};
                    this.merAuditImgList[4].src = this.merchantDatas.facadeImageUrl4;
                    for (let i = this.merAuditImgList.length - 1; i >= 0; i--) {
                        if (this.merAuditImgList[i].src == undefined) {
                            this.merAuditImgList.splice(i, 1);
                        }
                    }
                    // console.log(this.merAuditImgList);
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //审核通过/不通过 按钮
        auditMercYes(index) {
            // 1通过。2驳回
            this.extendMerchantDatas = $.extend(true, {}, this.merchantDatas);
            if (!this.extendMerchantDatas.salesmanName && index == 1) {
                let prer_html = this.$t("salesman.Salesman");
                if (localStorage.getItem("locale") == "en") {
                    prer_html = prer_html.replace("*:", "").toLocaleLowerCase();
                } else {
                    prer_html = prer_html.replace("*:", "");
                }
                this.$message(this.$t("hint.pleaseEnter") + prer_html);
                return false;
            }

            if (
                this.extendMerchantDatas.merchantsType ==
                this.$t("mer.OnlineMerchants")
            ) {
                this.extendMerchantDatas.merchantsType = "Y";
            }
            if (
                this.extendMerchantDatas.merchantsType ==
                this.$t("mer.UnderLineMerchant")
            ) {
                this.extendMerchantDatas.merchantsType = "N";
            }

            if (
                this.extendMerchantDatas.chargeType ==
                this.$t("button.Merchant")
            ) {
                this.extendMerchantDatas.chargeType = "0";
            }
            if (
                this.extendMerchantDatas.chargeType == this.$t("mer.Customer")
            ) {
                this.extendMerchantDatas.chargeType = "1";
            }
            if (this.extendMerchantDatas.whiteLable == this.$t("search.YES")) {
                this.extendMerchantDatas.whiteLable = "Y";
            }
            if (this.extendMerchantDatas.whiteLable == this.$t("search.NO")) {
                this.extendMerchantDatas.whiteLable = "N";
            }
            // let isReturnPolicy = this.extendMerchantDatas.isReturnPolicy;
            // if (isReturnPolicy == this.$t("search.YES")) {
            //   this.extendMerchantDatas.isReturnPolicy = "0";
            // }
            // if (isReturnPolicy == this.$t("search.NO")) {
            //   this.extendMerchantDatas.isReturnPolicy = "1";
            // }
            // let isSignFor = this.extendMerchantDatas.isSignFor;
            // if (isSignFor == this.$t("search.YES")) {
            //   this.extendMerchantDatas.isSignFor = "0";
            // }
            // if (isSignFor == this.$t("search.NO")) {
            //   this.extendMerchantDatas.isSignFor = "1";
            // }
            let setDay = this.extendMerchantDatas.setDay;
            if (setDay == "T+1") {
                this.extendMerchantDatas.setDay = "1";
            }
            if (setDay == "T+2") {
                this.extendMerchantDatas.setDay = "2";
            }
            if (setDay == "T+3") {
                this.extendMerchantDatas.setDay = "3";
            }
            let msg;
            if (this.mercDataList.length == 1) {
                //商户进件申请
                msg =
                    index == 1
                        ? this.$t("hint.TheAdditonOf4")
                        : this.$t("hint.TheAdditonOf5");
            } else {
                //商户信息修改
                msg =
                    index == 1
                        ? this.$t("hint.TheAdditonOf1")
                        : this.$t("hint.TheAdditonOf3");
            }

            this.$msgbox({
                title: this.$t("hint.Alert"),
                message: msg,
                showClose: false,
                showCancelButton: true,
                closeOnClickModal: false,
                confirmButtonText: this.$t("button.OK"),
                cancelButtonText: this.$t("button.Cancel")
            })
                .then(() => {
                    if (this.companyId == "2")
                        this.extendMerchantDatas.bankCity = this.areaCode;
                    this.extendMerchantDatas.state = index;
                    this.aduitFn(this.extendMerchantDatas, index);
                })
                .catch(() => {
                    done();
                });
        },

        //商户审核通过与否接口方法
        aduitFn(state, value) {
            viceMerchant(state).then(res => {
                // console.log(res);
                if (res.code == 0) {
                    this.$notify({
                        title: this.$t("hint.Alert"),
                        message: this.$t("hint.OperationSuccess"),
                        type: "success",
                        duration: 2000
                    });
                    this.$router.push({ path: "/merAudit" });
                } else {
                    this.$notify({
                        title: this.$t("hint.Alert"),
                        message: this.$t("hint.OperationFail"),
                        type: "error",
                        duration: 2000
                    });
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.el-table::before {
    height: 0;
}
.quarter {
    width: 40%;
    float: left;
    line-height: 40px;
}
.el-upload-list--picture .el-upload-list__item {
    width: 80px;
    float: left;
}
.el-upload-list--picture
    .el-upload-list__item.is-success
    .el-upload-list__item-name {
    display: none;
}
</style>

